{include file="common/head"/}
<style>
    .layui-table-cell{height: auto;}
    .layui-table-cell ul li a{color: #1C8FEF;display: block;border: 1px solid #ececec;padding: 3px 8px;}
    .layui-table-cell ul li a:hover{color: #005580}
    .layui-elem-quote {margin-bottom: 10px; padding: 13px;border-left: 0px solid #009688;border-radius: 0 2px 2px 0;background-color: #f2f2f2;height: 38px;}
</style>
<div class="admin-main layui-anim layui-anim-upbit">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>请假列表</legend>
    </fieldset>
    <blockquote class="layui-elem-quote">
    <div class="layui-inline">
        <form class="layui-form" action="" style="float:left;">
            <div class="layui-form-item" style="margin-left: -100px;">
                <div class="layui-input-block" style="width: 300px;">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="leave_date" placeholder="yyyy-MM-dd">
                        </div>
                    </div>
                    <a  href="{:url('lists')}" class="layui-btn layui-btn-primary" style="margin-left: 207px;margin-top: -72px;">重置</a>
                </div>
            </div>
        </form>
        <form class="layui-form" action="" style="float: left;margin-left: 50px;">
            <div class="layui-form-item" style="margin-bottom: 0px">
                <div class="layui-inline" style="margin-right: 0px">
                    <div class="layui-input-inline" style="width: 200px;">
                        <input type="text" id="keyword" name="keyword" autocomplete="off"placeholder="请输入请假人"class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="margin-right: 0px">
                    <div class="layui-btn-group layui-inline" style="margin: 0px">
                        <a  href="{:url('lists')}" class="layui-btn layui-btn-primary">重置</a>
                        <button id="search" class="layui-btn layui-btn-normal" type="button" lay-submit lay-filter="formDemo" style="background-color: #009688;">
                            <i class="layui-icon">&#xe615;</i>查找
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    </blockquote>

    <table class="layui-table" id="list" lay-filter="list"></table>
</div>
<script type="text/html" id="leave_reason">
    {{# if(d.content==null){ }}
    病假
    {{# }else { }}
    {{d.content}}
    {{# } }}
</script>
<!--<script type="text/html" id="status">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="通过|不通过" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }}>
</script>-->
<script type="text/html" id="status">
    {{# if(d.status==0){ }}
    <button class="layui-btn layui-btn-xs pass" value="{{d.id}}"  lay-filter="pass">通过</button>
    <button class="layui-btn layui-btn-danger layui-btn-xs unpass" value="{{d.id}}"  lay-filter="unpass">不通过</button>
    {{# }else { }}
    {{d.status==1?' <button class="layui-btn layui-btn-xs layui-btn-disabled">通过</button>':'<button class="layui-btn layui-btn-xs layui-btn-disabled">不通过</button>'}}
    {{# } }}

</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">{:lang('del')}</a>
</script>

{include file="common/foot"/}
<script>
    layui.use(['table','laydate'], function() {
        var table = layui.table, $ = layui.jquery;var form = layui.form; var laydate = layui.laydate;

        var tableIn = table.render({
            id: 'user',
            elem: '#list',
            url: "{:url('lists')}",
            method: 'post',
            page: true,
            even:true,
            cols: [[
                {field: 'teacher_no',title: '请假人工号', width: 150,style:'height: auto;'},
                {field: 'true_name',title: '请假人', width: 150,style:'height: auto;'},
                {field: 'content',title: '请假原因', width: 150,style:'height: auto;',templet:'#leave_reason'},
                {field: 'leave_date', title: '请假时间', width: 200,templet:'#person_type'},
                {field: 'status', align: 'center', title: '审核状态', width: 200, toolbar: '#status'},
                {field: 'reviewer', title: '审核人', width: 150},
                {field: 'review_time',title: '审核时间', width: 200,style:'height: auto;'},
                {width: 160, align: 'center', toolbar: '#barDemo'}
            ]],
            limit: 10 //每页默认显示的数量
        });

        //时间选择器
        laydate.render({
            elem: '#leave_date'
            ,done: function(value){
                console.log(value); //得到日期生成的值，如：2017-08-18
                //表格重载
                tableIn.reload({
                    //传递额外参数
                    where: {leave_date: value}
                });

            }
        });

        $('#search').on('click', function () {

            var keyword = $('#keyword').val();

            if ($.trim(keyword) === '') {
                layer.msg('{:lang("pleaseEnter")}查找信息！', {icon: 0});
                return;
            }
            //表格重载
            tableIn.reload({
                //传递额外参数
                where: {keyword: keyword}

            });
        });

        $(document).on('click','.pass',function(obj){
            loading =layer.load(1, {shade: [0.1,'#fff']});
            var id = this.value;
            $.post('{:url("leaveState")}',{'id':id,'status':1},function (res) {
                layer.close(loading);
                if (res.code==1) {
                    tableIn.reload();
                }else{
                    layer.msg(res.msg,{time:1000,icon:2});
                    return false;
                }
            })

         });
        $(document).on('click','.unpass',function(obj){
            loading =layer.load(1, {shade: [0.1,'#fff']});
            var id = this.value;
            $.post('{:url("leaveState")}',{'id':id,'status':-1},function (res) {
                layer.close(loading);
                if (res.code==1) {
                    tableIn.reload();
                }else{
                    layer.msg(res.msg,{time:1000,icon:2});
                    return false;
                }
            })

        });
        table.on('tool(list)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('{:lang("Are you sure you want to delete it")}', function(index){
                    $.post("{:url('leaveDel')}",{id:data.id},function(res){
                        if(res.code==1){
                            layer.msg(res.msg,{time:1000,icon:1});
                            obj.del();
                        }else{
                            layer.msg(res.msg,{time:1000,icon:2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>
</body>
</html>